<!--  -->
<template>
  <div class>
    <div class="pad-20">
      <!-- 卡列表 -->
      <div class="f-32 c000 mag-t-10 f-w-500">信用卡</div>
      <ul class="mag-t-20">
        <li
          @click="selCardFun(val)"
          class="box-bg mag-b-20 mag-r-20"
          :class="{'sel':val.selType==1}"
          v-for="(val,key) in cardList"
          :key="key"
        >
          <div class="fiex f-26">
            <div>
              <img
                class="back-logo mag-r-10"
                :src="val.bankCode | fmtBankimsrc"
                :onerror="commonConfig.errorImg"
              />
            </div>
            <div>{{val.bank}}</div>
            <div>({{val.bankCard | fmtCardNo}})</div>
          </div>
        </li>
      </ul>
    </div>
    <!--卡状态 -->
    <div class>
      <div class="pad-l-20 pad-r-20 f-32 c000 mag-t-10 f-w-500">卡状态</div>
      <ul class="fiex center pad-l-10 pad-r-10 mag-t-20">
        <li
          v-for="(val,key) in typeList"
          :key="key"
          class="box-bg mag-b-20 fiex1 mag-l-10 mag-r-10"
          @click="selTypeFun(val)"
          :class="{'sel':val.selType==1}"
        >
          <div>{{val.name}}</div>
        </li>
      </ul>
    </div>
    <!-- 提交按钮 -->
    <div class="fiex center foot-box mag-t-50">
      <div @click="reloadFun()" class="fiex1 foot-box-child pad-t-20 pad-b-20">重置</div>
      <div @click="subFun()" class="fiex1 foot-box-child pad-t-20 foot-box-sel pad-b-20">确定</div>
    </div>
  </div>
</template>

<script>
var self = "";
export default {
  data() {
    return {
      cardList: "",
      typeList: [
        {
          selType: "0",
          name: "失败",
          code: "0"
        },
        {
          selType: "0",
          name: "执行中",
          code: "1"
        },
        {
          selType: "0",
          name: "成功",
          code: "2"
        },
        {
          selType: "0",
          name: "中断",
          code: "3"
        }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    self = this;
    self.loadData(); //加载卡数据
  },
  methods: {
    reloadFun() {
      //重置
      $.each(self.cardList, function(k, v) {
        v.selType = 0;
      });
      $.each(self.typeList, function(k, v) {
        v.selType = 0;
      });
      var memory = self.cardList;
          self.cardList ="";
          self.cardList = memory;
      var memory2 = self.typeList;
          self.typeList ="";
          self.typeList = memory2;
      console.log("self.cardList",self.cardList)
    },
    subFun() {
      //数据提交
      var cardList = {}; //卡列表集合
      var typeList = {}; // 卡状态集合
      //提取银行卡
      $.each(self.cardList, function(k, v) {
        if (v.selType == 1) {
          cardList[v.id] = v;
        }
      });
      //提取卡状态
      $.each(self.typeList, function(k, v) {
        if (v.selType == 1) {
          typeList[v.code] = v;
        }
      });
      self.$emit("closeScreenChild", {
        cardList,
        typeList
      });
      console.log("银行集合", cardList);
      console.log("卡状态表集合", typeList);
    },
    selTypeFun(val) {
      //选择卡状态
      self.typeList.forEach((v, k) => {
        v.selType = 0;
      });
      //选择银行卡
      if (val.selType == 1) {
        //1:为选中
        val.selType = 0;
      } else {
        val.selType = 1;
      }

      var memory = self.typeList;
      self.typeList = "";
      self.typeList = memory;
    },
    selCardFun(val) {
      //选择卡
      self.cardList.forEach((v, k) => {
        v.selType = 0;
      });
      //选择银行卡
      if (val.selType == 1) {
        //1:为选中
        val.selType = 0;
      } else {
        val.selType = 1;
      }
      var memory = self.cardList;
      self.cardList = "";
      self.cardList = memory;
    },
    async loadData() {
      var sendData = {};
      var cardDetial = await self.$axiosFun(
        "/customer/bankCard/findList",
        {
          type: "2", //1:储蓄卡2信用卡
          token: localStorage.getItem("token")
        },
        "get"
      );
      if (cardDetial.code == 1000) {
        self.cardList = cardDetial.data;
      } else {
        self.$toast(cardDetial.message);
      }
      //   $th.cardList = cardDetial.data;
      console.log("卡列表", cardDetial);
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import "./index.css";
</style>